{% extends "manage.html" %}
{% load static %}

{% block title %} Questions {% endblock %}

{% block pagetitle %} Questions {% endblock pagetitle %}

{% block script %}
<script type="text/javascript" src="{% static 'yaksh/js/show_question.js' %}"></script>
<script type="text/javascript" src="{% static 'yaksh/js/jquery.tablesorter.min.js' %}"></script>
{% endblock %}

{% block content %}
  <div class="container-fluid">
    <div class="nav nav-pills" role="tablist" aria-orientation="vertical">
      <a href="#show" id="showbar" class="nav-link active"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true"> All Questions</a>
      <a href="#updown" id="updownbar" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false" > Upload Questions</a>
    </div>
    <br>
    <div class="tab-content">
      <!-- Upload Questions -->
      <div id="updown" class="card tab-pane fade" role="tabpanel" aria-labelledby="updownbar">
        <div class="col" role="alert">
          <p>You can upload question files the following ways -
            <li><b><u>Yaml File</u></b>
              <p>One can upload Yaml file with extensions .yaml or .yml. Please note
                that you cannot upload files associated to a question. Yaml file can
                have any name.
              </p>
            </li>
            <li><b><u>Zip File</u></b>
             <p> One can also upload zip with the following zip structure - </p>
              <pre>
                .zip
                |-- .yaml or .yml
                |-- .yaml or .yml
                |-- folder1
                |   |-- Files required by questions
                |-- folder2
                |   |-- Files required by questions
              </pre>
            </li>
          </p>
        </div>
        <div class="card-body">
          <form action="" method="post"  enctype="multipart/form-data">
            {% csrf_token %}
              <div class="form-group col-md-6">
                  <a class="btn btn-info" href="{% url 'yaksh:download_yaml_template' %}">
                    <i class="fa fa-download"></i>&nbsp;Download Template</a>
                  <br><br>
                  <h4> Or </h4>
                  <br>
                  <div class="input-group mb-3">
                      <div class="custom-file">
                          {{ upload_form }}
                          <label class="custom-file-label" for="id_file">
                              Choose file
                          </label>
                      </div>
                      <div class="input-group-append">
                        <button class="btn btn-outline-primary" type="submit" name="upload" value="upload"><i class="fa fa-upload"></i>&nbsp;Upload File</button>
                      </div>
                  </div>
              </div>
              <script>
                  $('#id_file').on('change',function(){
                      //get the file name
                      var fileName = $(this).val();
                      //replace the "Choose a file" label
                      $(this).next('.custom-file-label').html(fileName);
                  })
              </script>
          </form>
        </div>
      </div>
      <!-- End of upload questions -->

      <div id="show" class="tab-pane fade show active" role="tabpanel" aria-labelledby="showbar">
        {% if messages %}
          {% for message in messages %}
          <div class="alert alert-dismissible alert-info">
              <button type="button" class="close" data-dismiss="alert">
                  <i class="fa fa-close"></i>
              </button>
              <strong>{{ message }}</strong>
          </div>
          {% endfor %}
        {% endif %}
        <div class="card">
          <div class="card-body">
            <!-- Filter Questions -->
            <h4>Filters Questions: </h4>
            <form method="GET" action="{% url 'yaksh:questions_filter' %}">

              <div class="row">
                  <div class="col-md-4">{{ form.question_type }}</div>
                  <div class="col-md-4">{{ form.language }}</div>
                  <div class="col-md-4">{{ form.marks }}</div>
                  <br><br>
                  <div class="col">
                    <button class="btn btn-outline-success">
                      <i class="fa fa-filter"></i>&nbsp;Filter
                    </button>
                  </div>
              </div>
            </form>
            <!-- End Filter Questions -->
            <hr>
            <!-- Search by Tags -->
            <h4 >Search using Tags: </h4>
            <div class="row">
              <div class="col">
                <form method="GET" action="{% url 'yaksh:search_questions_by_tags' %}">
                  <div class="input-group">
                    <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search questions using comma separated Tags">
                    <span class="input-group-append">
                      <button class="btn btn-outline-success" type="submit">
                        <i class="fa fa-search"></i>&nbsp;Search
                      </button>
                    </span>
                  </div>
                </form>
              </div>
              <div class="col">
                <select class="form-control" id="sel1" onchange="append_tag(this);">
                  {% if all_tags %}
                   <option value="" disabled selected>Available Tags</option>
                  {% for tag in all_tags %}
                  <option>
                      {{tag}}
                  </option>
                  {% endfor %}
                  {% else %}
                   <option value="" disabled selected>No Available Tags</option>
                  {% endif %}
                </select>
              </div>
            </div>
            <br>
            <!-- End Search by Tags -->
            <a class="btn btn-outline-danger" href="{% url 'yaksh:show_questions' %}">
              <i class="fa fa-times"></i>&nbsp;Clear
            </a>
          </div>
          <!-- End Card body -->
        </div>
        <!-- End card filters and search -->
        <form name=frm action="{% url 'yaksh:show_questions' %}" method="post">
          {% csrf_token %}
          <div id="filtered-questions">
            <br>
            <a class="btn btn-lg btn-success" href="{% url 'yaksh:add_question' %}">
              <i class="fa fa-plus-circle"></i>&nbsp;Add Question</a>
            {% if objects %}
              <div>
                <br>
                {% include "yaksh/paginator.html" %}
                <br>
                <h5><input id="checkall" type="checkbox"> Select All </h5>
                 <div class="table-wrapper-2">
                    <table id="questions-table" class="tablesorter table  table-striped table-responsive-sm">
                      <thead>
                        <tr>
                          <th> Select </th>
                          <th> Sr No. </th>
                          <th> Summary&nbsp;<i class="fa fa-sort"></i> </th>
                          <th> Language&nbsp;<i class="fa fa-sort"></i> </th>
                          <th> Type&nbsp;<i class="fa fa-sort"></i> </th>
                          <th> Marks&nbsp;<i class="fa fa-sort"></i> </th>
                          <th>Test</th>
                          <th>Download</th>
                          <th>Delete</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for question in objects %}
                        <tr>
                          <td>
                           <input type="checkbox" name="question" value="{{ question.id }}">
                          </td>
                          <td>{{forloop.counter}}</td>
                          <td><a href="{% url 'yaksh:add_question' question.id %}">{{question.summary|capfirst}}</a></td>
                          <td>{{question.language|capfirst}}</td>
                          <td>{{question.type|capfirst}}</td>
                          <td>{{question.points}}</td>
                          <td>
                            <a href="{% url 'yaksh:test_question' question.id %}" class="btn btn-info">
                              Test
                            </a>
                          </td>
                          <td><a href="{% url 'yaksh:download_question' question.id %}" class="btn btn-primary">
                            <i class="fa fa-download"></i>&nbsp;Download</a></td>
                          <td><a href="{% url 'yaksh:delete_question' question.id %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete {{question.summary|capfirst}}?')">
                          <i class="fa fa-trash"></i>&nbsp;Delete</a></td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
              </div>
            {% include "yaksh/paginator.html" %}
            {% else %}
              <br><br>
              <div class="alert alert-info">
                <center><h3>No Questions found</h3></center>
              </div>
            {% endif %}
          </div>
          <br>
          <center>
            {% if objects %}
              <button class="btn btn-lg btn-primary" type="submit" name='download' value='download'><i class="fa fa-download"></i>&nbsp;Download Selected</button>
              <button class="btn btn-lg btn-primary" type="submit" name="test" value="test">Test Selected</button>
              <button class="btn btn-lg btn-danger" type="submit" onClick="return confirm_delete(frm);" name='delete' value='delete'>
              <i class="fa fa-trash"></i>&nbsp;Delete Selected</button>
            {% endif %}
          </center>
        </form>
      </div>
    </div>
  </div>
{% endblock %}

